<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      append-to-body
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      class="pf-dialog pf-dialog_center"
      title="表单属性"
      :width="formConf.generalWidth"
    >
      <el-form size="small" label-width="100px" labelPosition="left">
        <el-form-item label="表单尺寸">
          <el-radio-group v-model="formConf.size">
            <el-radio-button label="medium">中等</el-radio-button>
            <el-radio-button label="small">较小</el-radio-button>
            <el-radio-button label="mini">迷你</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标签对齐">
          <el-radio-group v-model="formConf.labelPosition">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button
              label="top"
              :disabled="formConf.formStyle === 'word-form'"
              >顶部对齐
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题宽度">
          <el-input-number
            v-model="formConf.labelWidth"
            :min="0"
            placeholder="标题宽度"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="栅格间隔">
          <el-input-number
            v-model="formConf.gutter"
            :min="0"
            placeholder="栅格间隔"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item
          label="弹窗类型"
          v-if="modelType != 3 && modelType != 6 && webType == 2"
        >
          <el-select v-model="formConf.popupType" placeholder="请选择">
            <el-option label="居中弹窗" value="general"></el-option>
            <el-option label="右侧弹窗" value="drawer"></el-option>
            <el-option label="全屏弹窗" value="fullScreen"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表单样式" v-if="modelType != 3">
          <el-select v-model="formConf.formStyle" placeholder="请选择">
            <el-option label="默认风格" value=""></el-option>
            <el-option label="公文风格" value="word-form"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表单宽度" v-if="formConf.popupType === 'general'">
          <el-select v-model="formConf.generalWidth" placeholder="请选择">
            <el-option
              v-for="item in generalWidthOptions"
              :label="item"
              :value="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="表单宽度"
          v-if="formConf.popupType === 'fullScreen'"
        >
          <el-select v-model="formConf.fullScreenWidth" placeholder="请选择">
            <el-option
              v-for="item in fullScreenWidthOptions"
              :label="item"
              :value="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="表单宽度" v-if="formConf.popupType === 'drawer'">
          <el-select v-model="formConf.drawerWidth" placeholder="请选择">
            <el-option
              v-for="item in generalWidthOptions"
              :label="item"
              :value="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="表单Css">
          <el-button style="width: 100%" @click="addStyle">编写样式</el-button>
        </el-form-item>
        <el-form-item label="表单Class">
          <el-select
            v-model="formConf.className"
            multiple
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in formConf.classNames"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主键策略">
          <el-select
            v-model="formConf.primaryKeyPolicy"
            placeholder="请选择"
            :disabled="!!getFormInfo().id"
          >
            <el-option label="雪花ID" :value="1" />
            <el-option label="自增长ID" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <span slot="label"
            >并发锁定
            <el-tooltip
              content="并发提交表单时候，加乐观锁机制以保证数据提交准确性"
              placement="top"
            >
              <a class="el-icon-warning-outline"></a>
            </el-tooltip>
          </span>
          <el-switch v-model="formConf.concurrencyLock" />
        </el-form-item>
        <el-form-item label="逻辑删除">
          <el-switch v-model="formConf.logicalDelete" />
        </el-form-item>
        <template v-if="modelType != 3 && modelType != 6 && webType != 3">
          <el-divider>表单按钮</el-divider>
          <div class="per-cell">
            <el-checkbox v-model="formConf.hasConfirmBtn">确定</el-checkbox>
            <el-input v-model="formConf.confirmButtonText" />
          </div>
          <div class="per-cell">
            <el-checkbox v-model="formConf.hasCancelBtn">取消</el-checkbox>
            <el-input v-model="formConf.cancelButtonText" />
          </div>
          <template v-if="webType == 2">
            <div class="per-cell" :class="{ last: !formConf.hasPrintBtn }">
              <el-checkbox v-model="formConf.hasPrintBtn">打印</el-checkbox>
              <el-input v-model="formConf.printButtonText" />
            </div>
            <el-form-item label="" v-if="formConf.hasPrintBtn">
              <pf-TreeSelect
                :options="printTplList"
                v-model="formConf.printId"
                placeholder="请选择打印模板"
                lastLevel
                clearable
              ></pf-TreeSelect>
            </el-form-item>
          </template>
        </template>
        <template v-if="formConf.funcs && (modelType == 1 || modelType == 6)">
          <el-divider>脚本事件</el-divider>
          <el-form-item label="onLoad">
            <el-button
              style="width: 100%"
              @click="editFunc(formConf.funcs.onLoad, 'onLoad', true)"
              >表单加载触发
            </el-button>
          </el-form-item>
          <el-form-item label="beforeSubmit">
            <el-button
              style="width: 100%"
              @click="
                editFunc(formConf.funcs.beforeSubmit, 'beforeSubmit', true)
              "
              >提交前置触发
            </el-button>
          </el-form-item>
          <el-form-item label="afterSubmit">
            <el-button
              style="width: 100%"
              @click="editFunc(formConf.funcs.afterSubmit, 'afterSubmit', true)"
              >提交后置触发</el-button
            >
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer">
        <el-button @click="close">{{
          formConf.cancelButtonText || "取 消"
        }}</el-button>
        <el-button type="primary" @click="handelConfirm"
          >{{ formConf.confirmButtonText || "确 定" }}
        </el-button>
      </div>
    </el-dialog>
    <StyleScript
      :visible.sync="styleScriptVisible"
      :value="formConf.classJson"
      @updateStyleScript="updateStyleScript"
    />
    <form-script
      :visible.sync="formScriptVisible"
      :tpl="activeScript"
      :fields="drawingList"
      @updateScript="updateScript"
    />
  </div>
</template>

<script>
import StyleScript from "./rightPanel/StyleScript";
import FormScript from "./rightPanel/FormScript";
import { mapState } from "vuex";
export default {
  name: "form-properties",
  props: ["formConf", 'modelType', 'webType'],
  inject: ["getFormInfo"],
  components: {
    StyleScript,
    FormScript,
  },
  data() {
    return {
      // key: +new Date(),
      formData: {},
      styleScriptVisible: false,
      formScriptVisible: false,
      activeScript: '',
      generalWidthOptions: ['600px', '800px', '1000px', '40%', '50%', '60%', '70%', '80%'],
      fullScreenWidthOptions: ['800px', '1000px', '1200px', '1400px', '50%', '60%', '70%', '80%', '90%', '100%'],
    };
  },
  computed: {
    ...mapState("designer", ["activeData","drawingList"]),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onOpen() {
      this.key = +new Date();
      // this.formData = this.formConf
    },
    onClose() {},
    close(e) {
      this.$emit("update:visible", false);
    },
    handelConfirm() {
      this.$emit("update:visible", false);
    },
    addStyle() {
      this.$nextTick(() => {
        this.styleScriptVisible = true;
      });
    },
    updateStyleScript(func) {
      this.formConf.classJson = func
      this.formConf.classNames = this.spiltByDoc(func).map(o => o.key)
    },
    spiltByDoc(str) {
      let func = str.trim()
      let arr = []
      let cut = func.split("}")
      cut.forEach(item => {
        if (item) {
          let afterCut = item.split("{")
          let classObject = {}
          let name = ''
          if (afterCut[0].split(" ").length > 1) {
            name = afterCut[0].split(" ")[0]
          } else {
            name = afterCut[0]
          }
          if (name.split("\.").length > 1) {
            name = name.split("\.")[1]
          }
          name = name.split("\:")[0]
          let matching = new RegExp(/^[a-zA-Z]-?.*[a-zA-Z0-9_]*$/)
          if (matching.test(name)) {
            classObject.key = name.replace(/\r|\n/ig, '').trim()
            classObject.value = item.replace(/\r|\n/ig, '') + "}"
            arr.push(classObject)
          }
        }
      })
      return arr
    },
    editFunc(str, funcName, isConf) {
      this.activeScript = str;
      this.activeFunc = funcName;
      this.isConf = isConf || false;
      this.formScriptVisible = true;
    },
    updateScript(data) {
      if (this.isConf) {
        this.formConf.funcs[this.activeFunc] = data;
      } else {
        this.activeData.on[this.activeFunc] = data;
      }
    },
  },
};
</script>

<style>
</style>